<!--产品追溯，包含了叫料系统，首先这个板块先做叫料系统-->
<!--用户权限说明-->
<!--管理员：代码：1，可以做所有的操作-->
<!--问题编辑人员：代码：2，可以做问题的修改操作-->
<template>
  <div style="margin: 0;padding: 0">
    <el-container>
      <!--页面表头设计-->
      <el-header style="height: 7vh">
        <el-link class="headMain" href="http://10.255.96.48:3404/">俄动力质量管理系统</el-link>
        <span class="center-text">叫料系统</span>
        <el-popover
            placement="top-start"
            title="用户信息"
            width="200"
            trigger="hover">
          <div style="margin-top: 10px">Name：{{useName}}</div>
          <div style="margin-top: 10px">ID:{{useId}}</div>
          <div style="margin-top: 10px" @click="logOut"><el-link>退出</el-link></div>
          <div class="headMain" slot="reference">{{useName}}</div>
        </el-popover>
      </el-header>
      <el-container>
        <el-aside width="200px">
        </el-aside>
        <el-container>
          <!--主题设计-->
          <el-main style="height: 79vh;overflow: auto">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="叫料数据" name="first">
                  <div>
                    <el-row :gutter="20">
                      <el-col :span="5">
                        <div style="width: 100%">
                          <el-statistic
                              group-separator=","
                              :precision="2"
                              :value="value1"
                              title="零部件名称"
                          ></el-statistic>
                        </div>
                      </el-col>
                      <el-col :span="4">
                        <div style="width: 100%">
                          <el-statistic
                              group-separator=","
                              :precision="2"
                              :value="value2"
                              :title="title"
                          ></el-statistic>
                        </div>
                      </el-col>
                      <el-col :span="4">
                        <div>
                          <el-statistic title="累计到车间">
                            <template slot="formatter">
                              456
                            </template>
                          </el-statistic>
                        </div>
                      </el-col>
                      <el-col :span="4">
                        <div>
                          <el-statistic
                              group-separator=","
                              :precision="2"
                              decimal-separator="."
                              :value="value1"
                              title="累计使用"
                          >
                            <template slot="prefix">
                              <i class="el-icon-s-flag" style="color: red"></i>
                            </template>
                            <template slot="suffix">
                              <i class="el-icon-s-flag" style="color: blue"></i>
                            </template>
                          </el-statistic>
                        </div>
                      </el-col>
                      <el-col :span="6">
                        <div>
                          <el-statistic :value="like ? 521 : 520" title="预计叫料时间">
                            <template slot="suffix">
                            <span @click="like = !like" class="like">
                            <i class="el-icon-star-on" style="color:red" v-show="!!like"></i>
                              <i class="el-icon-star-off" v-show="!like"></i>
                            </span>
                            </template>
                          </el-statistic>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
              </el-tab-pane>
              <el-tab-pane label="预警数据" name="second">
                <el-table
                    :data="alarmLimit"
                    border
                    style="width: 100%"
                    height="72vh">
                  <el-table-column
                      v-slot:default="scope"
                      label="零部件名称">
                    <div style="margin-right: 10px;margin-left: 20px">
                      <span>{{scope.row.partName}}</span>
                    </div>
                  </el-table-column>
                  <el-table-column
                      label="零部件名称"
                      v-slot:default="scope">
                    {{scope.row}}
                  </el-table-column>
                  <el-table-column
                      label="报警限值"
                      prop="alarmNmb">
                  </el-table-column>
                  <el-table-column
                      prop="editName"
                      label="编辑人">
                  </el-table-column>
                  <el-table-column
                      label="编辑"
                      v-slot:default="scope"
                      width="100">
                    <el-link style="margin-right: 10px;" @click="editAlarmShow(2,scope)">
                      <i class="el-icon-edit"></i>
                    </el-link>
                    <el-link style="margin-right: 10px;" @click="editAlarmShow(3,scope)">
                      <i class="el-icon-delete"></i>
                    </el-link>
                    <el-link style="margin-right: 10px;" @click="editAlarmShow(1,scope)">
                      <i class="el-icon-circle-plus-outline"></i>
                    </el-link>
                    {{scope.row.idUse}}
                  </el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="模型说明" name="third">模型说明</el-tab-pane>
            </el-tabs>
          </el-main>
          <el-footer>
            <el-button plain size="small">中  文</el-button>
            <el-button plain size="small">Русский язык</el-button>
            <el-button plain size="small">English</el-button>
          </el-footer>
        </el-container>
      </el-container>
    </el-container>

    <!--弹窗放置区-->
    <el-dialog
        :title="titleUse"
        :visible.sync="alarmLimitDialog"
        width="500px"
        :before-close="handleClose">
      <el-form ref="tableDataForm" :model="alarmLimitFrom" label-width="120px" :inline="true">
        <div>
          <el-form-item label="部件名称：" prop="workshop">
            <el-select v-model="alarmLimitFrom.pratName" clearable filterable placeholder="请选择" style="width:350px ">
              <el-option
                  v-for="item in productModelListOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="预警限值：">
            <el-input-number v-model="alarmLimitFrom.alarmNmb" style="width: 350px"></el-input-number>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="编辑人：" prop="op">
            <el-input v-model="alarmLimitFrom.editName" style="width: 350px"></el-input>
          </el-form-item>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="alarmLimitDialog = false">取 消</el-button>
    <el-button type="primary" @click="alarmEditOk">确 定</el-button>
  </span>
</el-dialog>

    <!--抽屉放置区域-->
  </div>
</template>

<script>

export default {
  name: "torqueManage",
  data() {
    return {
      activeName:'first',
      //用户权限相关的变量
      useName:'',//用户名称
      useId:'',//用户编号
      usePower:'',//用户权限

      like: true,
      value1: 4154.564,
      value2: 1314,
      title: "现有结存",

      //叫料系统用到的数据，库存数据
      callMaterials:[
        {
          idUse:null,//系统增加的唯一标识
          //编辑人
          editName:'',
          partName:'',//零部件名称
          inputDate:'',//投料日期-时间
          inputNub:'',//本次投入数量
          useDate:'',//使用时间
          useNub:'',//使用数量
          workShopAll:'',//车间使用结存，投入后结存数量
        }
      ],
      //叫料系统设置的报警限值
      alarmLimit:[
        {
          //创建时间
          establishTime:'',
          //修改时间
          updateTime:'',
          //删除标记
          deleteSign:1,
          idUse:null,//主键
          pratName:'',//零部件名称
          alarmNmb:'',//报警设置数量
          editName:'',//编辑人姓名
        }
      ],
      //叫料系统设置的编辑类型
      alarmLimitDoe:0,
      //叫料系统设置的点击Scope
      alarmLimitScope:null,
      //叫料系统的报警设置的表单编辑
      alarmLimitFrom:{
        idUse:null,//主键
        pratName:'',//零部件名称
        alarmNmb:'',//报警设置数量
        editName:'',//编辑人姓名
      },
      //弹窗的表头变量
      titleUse:'',
      //控制编辑/增加零部件报警限值的弹窗
      alarmLimitDialog:false,
      //零部件名称、供方等信息
      productModelList: [{
        id: '', // id
        createTime: null, // 创建时间，使用 null 或 Date 对象
        updateTime: null, // 更新时间，使用 null 或 Date 对象
        creator: '', // 创建人
        processStatus: '', // 流程状态
        sysUpdateUser: '', // 更新人
        sysAuditUser: '', // 审核人
        sysAuditTime: null, // 审核时间，使用 null 或 Date 对象
        sysDeleted: false, // 逻辑删除，通常使用布尔值表示是否已删除
        cpxh: '', // 产品型号
        lbjmc_C: '', // 零部件名称_中文
        lbjmc_E: '', // 零部件名称_英文
        lbjmc_R: '', // 零部件名称_俄文
        sccj: '' // 生产厂家
      }],

      //选择器：
      //选择零部件名称的选择器
      productModelListOption:[
        {label:'',value:''}
      ],

    }
  },
  watch: {},
  methods: {
    //退出登录
    logOut(){
      localStorage.removeItem('u_token');
      localStorage.removeItem('userName')
      this.$router.push('UserLogin')
    },
    //查询用户信息的函数
    inquiry(){
      //输入用户编号，向后端查询信息
      const useId=localStorage.getItem('userName').replace(/"/g, '');
      this.$request.post('/useQueryPower',{
        queryFiledName:'changeModel',
        userId:useId,
      }).then(result=>{
        if (result.code === 401) {
          this.$router.push('UserLogin')
          alert("您未登录，请登录")
        }else {
          this.useName=result.data.name
          this.usePower=result.data.changeModel
          this.useId=useId
          console.log(this.useId,this.usePower,this.useName)
        }
      })
    },
    //在tab控件上单击的函数
    handleClick(tab, event) {
      console.log(tab, event);
    },
    //弹框的关闭提示
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            console.log(_)
            done();
            if (this.editor) {
              this.editor.destroy();
              this.editor = null;
            }
          })
          .catch(_ => {
            console.log(_)
          });
    },
    //编辑报警限值的函数
    editAlarmShow(doe,scope){
      //
      this.alarmLimitDoe=doe
      this.alarmLimitScope=scope
      //1:新增一个叫料限值
      if (doe===1){
        //设置表头
        this.titleUse='您正在新增加一个报警条目'
        this.alarmLimitFrom={
          idUse:null,//主键
              pratName:'',//零部件名称
              alarmNmb:0,//报警设置数量
              editName:this.useName+'/'+this.useId,//编辑人姓名
        }
        this.alarmLimitDialog=true
        //组合零部件的数据
        this.productModelListOption=[]
        for (let i = 0; i < this.productModelList.length; i++) {
          let temp={
            label:this.productModelList[i].cpxh+'/'+this.productModelList[i].lbjmc_C+'/'+this.productModelList[i].lbjmc_E+'/'+this.productModelList[i].lbjmc_R+'/'+this.productModelList[i].sccj,
            value:this.productModelList[i].cpxh+'/'+this.productModelList[i].lbjmc_C+'/'+this.productModelList[i].lbjmc_E+'/'+this.productModelList[i].lbjmc_R+'/'+this.productModelList[i].sccj,
          }
          this.productModelListOption.push(temp)
        }
        // 最后，更新 productModelListOption 数组
        this.productModelListOption = [...new Set(this.productModelListOption.map(item => JSON.stringify(item)))]
            .map(itemString => JSON.parse(itemString));

      }
    },
    //编辑报警限值的函数，点击确定
    alarmEditOk(){
      //是新增
      if (this.alarmLimitDoe===1){
        // 向后端发送请求，插入一行数据

      }
    },
    //辅助函数：对零部件信息进行调用,调用所有的信息
    inquiryProductListBaseComponentAll(){
      this.$request.post('/inquiryProductListBaseComponentAll').then(result=>{
        if (result.code === 401) {
          this.$router.push('UserLogin')
          alert("您未登录，请登录")
        } else {
          this.productModelList=result.data
        }
      })
    }
  },
  mounted() {
    this.inquiry()
    this.inquiryProductListBaseComponentAll()
  }
}
</script>

<style scoped>
/* 主体左侧的工作步骤栏用到的数据包围的div的样式*/

.el-footer {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  border-width: 3px; /* 设置边框宽度为3像素 */
  border-color: blue; /* 设置边框颜色为蓝色 */
  border-style: solid; /* 设置边框样式为实线 */
  padding: 10px; /* 添加内边距 */
  border-left-color: white;
  border-top: white;
}

.el-aside {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  border-width: 3px; /* 设置边框宽度为3像素 */
  border-color: blue; /* 设置边框颜色为蓝色 */
  border-style: solid; /* 设置边框样式为实线 */
  padding: 10px; /* 添加内边距 */
  height: 89vh;
}

.el-main {
  color: #333;
  text-align: center;
  border-width: 3px; /* 设置边框宽度为3像素 */
  border-color: blue; /* 设置边框颜色为蓝色 */
  border-left-color: white;
  border-style: solid; /* 设置边框样式为实线 */
  padding: 10px; /* 添加内边距 */
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.headMain{
  color: #ffffff; /* 设置字体颜色为红色 */
  font-size: 18px;
}
.center-text {
  /* 使用 margin-left 和 margin-right auto 来实现居中效果 */
  margin-left: auto;
  margin-right: auto;
  /* 注意：如果 header 内只有这两个元素，你可能不需要 margin-right: auto */
}

.like {
  cursor: pointer;
  font-size: 25px;
  display: inline-block;
}

/*自定义样式*/
</style>